<template>
<!-- 供应商列表 -->
  <div class="Supplier">
      <ul class="c-container">
          <li class="title">
           <p><span class="icon iconfont iconkehu iconfontRight"></span> 客户</p>
          </li>
          <li class="search">
            <a-input-search
                  class="headerInput"
                  placeholder="请输入线索名称/手机/电话"
                  enter-button="搜索"
                  size="large"
                  v-model="pages.seachValue"
                  @search="onSearch"
                />
          </li>
          <li class="operation">
             <a-button type="primary" class="addBnt" @click='add'>
                <span class="icon iconfont iconadd"></span>新建客户
              </a-button>
          </li>
      </ul>
      <ul class="select">
          <li class="selectXian">已选中 <span style="color: #2362fb;">{{infoData.selectNum}}</span> 项</li>
          <li class="li">
             <a-button>
                <span class="icon iconfont iconcheck-circle iconfontRight"></span> 更改成交状态
              </a-button>
          </li>
           <li class="li">
             <a-button>
               <span class="icon iconfont icondaochuxuanzhong iconfontRight"></span> 导出选中
            </a-button>
          </li>
           <li class="li">
             <a-button>
               <span class="icon iconfont iconshanchu iconfontRight"></span>删除
             </a-button>
          </li>
           <li class="li">
             <a-button>
                <span class="icon iconfont iconlock iconfontRight"></span>锁定
             </a-button>
          </li>
           <li class="li">
             <a-button>
                <span class="icon iconfont iconjiesuo iconfontRight"></span>解锁
             </a-button>
          </li>
      </ul>
       <div class="table">
          <a-table 
             :columns='columns'
             :rowSelection="{
               fixed:true,
               onChange:onChangeSelct
             }" 
              :data-source="data"
              :pagination="false"
              :loading="loading"
              :rowKey="record => record.id"
              @change='handleTableChange'
              :scroll="{x: 1500,}"
            >
             <template v-slot:name="{text,record,index}">
                    <a @click='click(text,record.id,index)'>{{ text }}</a>
              </template>
         </a-table>
         <Paginatoion :total='total' :getList='getList' :pages='pages'/>
       </div>
  </div>
</template>

<script lang="ts">
import { onMounted,ref,reactive,toRefs,computed } from 'vue';
import { useStore } from "vuex";
import {useRouter } from 'vue-router'
import { findAgentLogListByAgentId } from '@/assets/api/home'
import Paginatoion from '@/components/pagination.vue'

export default {
  name:'Supplier',
   components: {
     Paginatoion
  },
  
  setup(){
    const columns = [
      {title: '客户名称',dataIndex: 'name', width: 100,slots: { customRender: 'name' },fixed:'left',ellipsis:true,sorter:true},
      {title: '客户来源',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '手机',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '电话',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '网址',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '邮箱',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '备注',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '锁定状态',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '成交状态',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '详细地址',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '负责人',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '更新时间',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '创建时间',dataIndex: 'name', width: 100,ellipsis:true,sorter:true},
      {title: '创建人',dataIndex: 'name', width: 100,fixed:'right',ellipsis:true,sorter:true,},
    ];
    const router = useRouter();
    const store = useStore();
     const visible:any = ref(false);
     const state:any =reactive({
          infoData:{
            selectNum:0,
          },
         columns,
          data: [
           {
             id:1,
             name:'liqiang',
             gender:'male',
             email:'clarindo.martins@example.com'
           },
            {
              id:2,
             name:'liqiang',
             gender:'male',
             email:'clarindo.martins@example.com'
           }
         ],
          total:5,
          loading: false,
          pages:{
            pageNum:10,
            pageSize:1,
            seachValue:''
          }
     }) 
    onMounted(()=>{
  
    });
    const onSearch=(val:string)=>{
       state.infoData.seachValue = val;
    };
    const add=()=>{
      store.dispatch('SIDBERINDEX',1);
      router.push({path:"/supplier_add"});
    };
    const handleTableChange=(...reult:any)=>{ // 操作了表单 ascend升序  descend降序
        console.log(reult,"handleTableChange")
    };
    const onChangeSelct=(arr:[])=>{// 复选框
        console.log(arr,"onChangeSelct")
        state.infoData.selectNum = arr.length;
    };
     const click=(text:string,record:any,index:number)=>{ //点击用户名称
        console.log(text,"record");
        console.log(record,"record");
        console.log(index,"record");

    
    };
    const getList=(data:object)=>{ //初始化数据
       console.log(data,"obj")
    };
    return {
    ...toRefs(state),onSearch,add,handleTableChange,onChangeSelct,click,getList
    }
    
  }
 
}
</script>
<style lang="less" scoped>
 .Supplier{
   width: 100%;
   height: 100%;
   position: relative;
 }

</style>
<style>
 .ant-drawer-content-wrapper{
   widows: 80%;
 }
</style>
